<template>
  <div class="demo">
    <div class="demo-title">带输入框的滑块</div>
    <div class="demo-content">
      <Row>
        <Col :span="12">
          <Slider v-model:value="inputValue1" :min="1" :max="20" />
        </Col>
        <Col :span="4">
          <InputNumber v-model:value="inputValue1" :min="1" :max="20" style="margin-left: 16px" />
        </Col>
      </Row>
      <Row>
        <Col :span="12">
          <Slider v-model:value="inputValue" :min="0" :max="1" :step="0.01" />
        </Col>
        <Col :span="4">
          <InputNumber
            v-model:value="inputValue"
            :min="0"
            :max="1"
            :step="0.01"
            style="margin-left: 16px"
          />
        </Col>
      </Row>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { Col, Row } from '@sscd/grid';
  import InputNumber from '@sscd/input-number';
  import Slider from '@sscd/slider';
  const inputValue = ref<number>(0);
  const inputValue1 = ref<number>(1);
</script>

<style lang="less" scoped></style>
